import React from 'react';
import PropTypes from 'prop-types';
import { Select, Icon } from 'antd';
import { BaseComponent } from 'fe-lib';
import { apiIsLoading, apiIsError, apiIsSuccess } from 'shared/utils/reducerUtil';
import PlaceHolderSelect from 'shared/components/PlaceHolderSelect';

const RELOAD = '@@reload@@';
const EMPTY = '@@empty@@';

const isReload = item => item === RELOAD || item.key === RELOAD;
const isEmpty = item => item === EMPTY || item.key === EMPTY;

class AjaxSelect extends BaseComponent {
    constructor(props) {
        super(props);
        super.bind('handlerChange');
    }

    componentDidMount() {
        // 组件挂载完成后，发起查询
        const { listData } = this.props;
        if (!apiIsSuccess(listData)) {
            this.props.getListData();
        }
    }

    checkReload(value) {
        if (Array.isArray(value)) {
            let flag = false;
            value.map(item => {
                if (isReload(item)) {
                    this.props.getListData();
                    flag = true;
                }
            });
            return flag;
        } else if (isReload(value)) {
            this.props.getListData();
            return true;
        }
        return false;
    }



    handlerChange(value) {
        if (this.checkReload(value)) {
            return value;
        }
        const { onChange, mode, labelInValue, key = 'id', text = 'name' } = this.props;
        let active = null;
        if (labelInValue) {
            if (mode === 'multiple') {
                active = [];
                if (value) {
                    value.map(item => {
                        if (!isEmpty(item)) {
                            active.push({ [key]: item.key, [text]: item.label })
                        }
                    });
                }
            } else {
                if (!isEmpty(value)) {
                    active = { [key]: value.key, [text]: value.label };
                }
            }
        } else {
            active = value;
        }
        onChange && onChange(active);
    }

    render() {
        const { listData, value, filterId, mode, className, style, labelInValue, emptyOption, key = 'id', text = 'name' } = this.props;
        if (apiIsLoading(listData)) {
            return <PlaceHolderSelect className={className} />
        } else if (apiIsError(listData)) {
            return <PlaceHolderSelect className={className} onClick={() => this.props.getListData()} text="加载失败，点击重试！" />
        } else {
            const treeData = listData.get('data');
            let active;
            if (labelInValue) {
                if (mode === 'multiple') {
                    active = [];
                    if (value && Array.isArray(value)) {
                        value.map(item => active.push({ key: item[key], label: item[text] }));
                    }
                } else {
                    active = value ? { key: value.id, label: value.name } : undefined;
                }
            } else {
                active = value;
            }
            const empty = { id: EMPTY, name: '请选择' };
            const relaod = { id: RELOAD, name: <a><Icon type="reload" />&nbsp;重新加载</a> };
            const arr = listData.get('data').toJS();
            const options = []
            if (!mode && emptyOption) {
                options.push(empty);
            }
            if (Array.isArray(arr) && arr.length > 0) {
                options.push(...arr);
            }
            options.push(relaod);
            return <Select
                mode={mode}
                style={style}
                className={className}
                value={active}
                onChange={this.handlerChange}
                labelInValue={labelInValue}
                placeholder="请选择"
            >
                {options && options.map(option => <Select.Option key={option.id} value={option.id}>{option.name}</Select.Option>)}
            </Select>;
        }
    }
}

AjaxSelect.propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    labelInValue: PropTypes.bool,
    emptyOption: PropTypes.bool,
    key: PropTypes.string,
    text: PropTypes.string,
    mode: PropTypes.string,
    value: PropTypes.any,
    onChange: PropTypes.func,
    listData: PropTypes.object.isRequired,
    getListData: PropTypes.func.isRequired,
};

export default AjaxSelect;
